
var s = document.getElementById("s");
var p = document.getElementById("p");
var r = document.getElementById("r");
//第二类获取dom
var result = document.querySelector(".result > p");
var user_score = document.getElementsByClassName('user-score')[0];
var comp_score = document.getElementsByClassName('comp-score')[0];
var user_count = 0;
var comp_count = 0;
var map = {
  's':'剪刀',
  'r':'石头',
  'p':'布'
};

function game(user_choice){
  var arr = ['s','p','r'];
  var index = Math.floor(Math.random() * arr.length);
  var comp_choice = arr[index];
  switch (user_choice + comp_choice) {
    case 'pr':
    case 'rs':
    case 'sp':
      user_count++;
      user_score.innerHTML = user_count;
      result.innerHTML = map[user_choice] + " vs " + map[comp_choice] +'你赢了！';
      break;
    case 'ps':
    case 'sr':
    case 'rp':
      comp_count++;
      comp_score.innerHTML = comp_count;
      result.innerHTML = map[user_choice] + " vs " + map[comp_choice] +'你输了...';
      break;
    case 'pp':
    case 'rr':
    case 'ss':
      result.innerHTML = map[user_choice] + " vs " + map[comp_choice] +'平局！';
      break;
  }
}

//addEventListener 方法
s.addEventListener("click",function () {
  game("s");
});

p.addEventListener("click",function () {
  game("p");
});

r.addEventListener("click",function () {
  game("r");
});


//on事件名 属性
// r.onclick = function () {
//   game(r);
// };
// s.onclick = function () {
//   game(s);
// };
// p.onclick = function () {
//   game(p);
// };








